<template>
	<view class="canvas-main">
		<canvas :style="'width:'+width+'rpx;height:'+height+'rpx;'" class="canvas-item" disable-scroll="true"
			canvas-id="canvasId" @error="error"></canvas>
	</view>
</template>

<script>
	import {
		createQrCodeImg
	} from './wxqrcode.js'
	export default {
		props: {
			//画布宽度(rpx)
			width: {
				type: Number,
				default: 750
			},
			//画布高度(rpx)
			height: {
				type: Number,
				default: 750
			},
			//生成的图片格式(jpg或png)
			fileType: {
				type: String,
				default: 'png'
			},
			//二维码内容
			content:{
				type: String,
				default: ''
			},
			lineWidth:{
				type:Number,
				default:6
			},
		},
		data() {
			return {
				pixelRatio: 0,
				context: null,
				x:0,
				y:0,
				info:{}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				uni.showLoading({
					title: '正在绘制...'
				})
				if (this.context) {
					await this.clear()
					this.context = null
				}
				const systemInfo = uni.getSystemInfoSync()
				this.pixelRatio = systemInfo.pixelRatio
				this.context = uni.createCanvasContext('canvasId', this)
				this.start()
				// this.drawQR();
			},
			async start() {
				await this.drawQR(this.info);
				this.save()
			},
			clear() {
				return new Promise(async (resolve, reject) => {
					await this.context.clearRect(0, 0, this.width, this.height)
					resolve()
				})
			},
			drawQR(item) {
				return new Promise(async (resolve, reject) => {
					item.width = uni.upx2px(this.width)
					item.height = uni.upx2px(this.height)
					item.x = uni.upx2px(this.x)
					item.y = uni.upx2px(this.y)
					item.lineWidth = uni.upx2px(this.lineWidth)
					item.qr = createQrCodeImg(this.content, {
						size: parseInt(300),
						typeNumber: parseInt(3)
					});
					this.context.save()
					await this.context.drawImage(item.qr, item.x, item.y, item.width, item
						.height)
					if (item.lineWidth) {
						this.context.setLineDash([])
						this.context.lineWidth = item.lineWidth
						this.context.strokeStyle = item.lineColor
						this.context.beginPath()
						this.context.moveTo(item.x + item.radius, item.y)
						this.context.arcTo(item.x + item.width, item.y, item.x + item.width,
							item.y +
							item.radius, item.radius)
						this.context.lineTo(item.x + item.width, item.y + item.height - item
							.radius)
						this.context.arcTo(item.x + item.width, item.y + item.height, item.x +
							item
							.width - item.radius, item.y + item.height, item.radius)
						this.context.lineTo(item.x + item.radius, item.y + item.height)
						this.context.arcTo(item.x, item.y + item.height, item.x, item.y + item
							.height - item.radius, item.radius)
						this.context.lineTo(item.x, item.y + item.radius)
						this.context.arcTo(item.x, item.y, item.x + item.radius, item.y, item
							.radius)
						this.context.closePath()
						this.context.stroke()
					}
					this.context.restore()
					await this.context.draw(true)
					uni.hideLoading()
					resolve()
				})
			},
			save() {
				let timer = setTimeout(async () => {
					await this.context.draw(true, setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'canvasId',
							fileType: this.fileType,
							quality: 1,
							width: this.width,
							height: this.height,
							destWidth: this.width * this.pixelRatio,
							destHeight: this.height * this.pixelRatio,
							success: (res) => {
								uni.hideLoading()
								this.$emit('change', res.tempFilePath)
							},
							fail: (err) => {
								console.log('生成图片失败:', err)
							}
						}, this)
					}, 500))
					clearTimeout(timer)
				}, 500)
			},
			error(e) {
				console.log('错误信息：', e)
			}
		}
	}
</script>

<style>
</style>